<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menus &amp; toolbars in PHP GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, menus, toolbars, PHP, programming, Linux">
<meta name="description" content="This part of the PHP GTK tutorial covers menus &amp; toolbars.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars</h1>

<p>
In this part of the PHP GTK programming tutorial, 
we will work with menus &amp; toolbars.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A common part in a GUI application is a <b>menubar</b>. A menubar consists of objects 
called menus. Top-level menus have their labels on the menubar.  
The menus have menu items. Menu items are commands that perform a specific action 
inside the application. Menus can also have submenus, which have their own menu items.
</p>


<h2>Simple menu</h2>

<p>
In our first example, we will create a menubar with one file menu. 
The menu will have only one menu item. By selecting the item the application quits. 
</p>


<pre class="code">
&lt;?php

/* 
ZetCode PHP GTK tutorial

This example shows a simple menu.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/
 
class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    public function init_ui() {

        $this-&gt;set_title('Simple menu');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $this-&gt;modify_bg(Gtk::STATE_NORMAL, new GdkColor(6400, 6400, 6440));
       
        $mb = new GtkMenuBar();

        $filemenu = new GtkMenu();
        $filemi = new GtkMenuItem("File");
        $filemi-&gt;set_submenu($filemenu);
       
        $exitmi = new GtkMenuItem("Exit");
        $exitmi-&gt;connect_simple('activate', array('gtk', 'main_quit'));              
        $filemenu-&gt;append($exitmi);

        $mb-&gt;append($filemi);

        $vbox = new GtkVBox(false, 2);
        $vbox-&gt;pack_start($mb, false, false, 0);

        $this-&gt;add($vbox);

        $this-&gt;set_default_size(250, 200); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
This is a small example with minimal menubar functionality.
</p>

<pre class="explanation">
$mb = new GtkMenuBar();
</pre>

<p>
The <code>GtkMenuBar</code> widget is created. This is a container
for the individual menus. 
</p>

<pre class="explanation">
$filemenu = new GtkMenu();
$filemi = new GtkMenuItem("File");
$filemi-&gt;set_submenu($filemenu);
</pre>

<p>
Toplevel <code>GtkMenuItem</code> is created. A menu item represents 
an action in a GUI application. 
</p>

<pre class="explanation">
$exitmi = new GtkMenuItem("Exit");
$exitmi-&gt;connect_simple('activate', array('gtk', 'main_quit'));              
$filemenu-&gt;append($exitmi);
</pre>

<p>
Exit <code>GtkMenuItem</code> is created and appended to the
File <code>GtkMenuItem</code>.
</p>

<pre class="explanation">
$mb-&gt;append($filemi);
</pre>

<p>
Toplevel <code>GtkMenuItem</code> is appended to the <code>GtkMenuBar</code>
widget. 
</p>

<pre class="explanation">
$vbox = new GtkVBox(false, 2);
$vbox-&gt;pack_start($mb, false, false, 0);
</pre>

<p>
Unlike in other toolkits, we have to take care of the layout management of the menubar
ourselves. We put the menubar into the vertical box. 
</p>

<img src="/img/gui/phpgtk/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>



<h2>Submenu</h2>

<p>
Our final example demonstrates how to create a submenu.
A submenu is a menu inside another menu. 
</p>

<pre class="code">
&lt;?php

/* 
ZetCode PHP GTK tutorial

This example shows a submenu.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/
 
class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    public function init_ui() {

        $this-&gt;set_title('Submenu');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $this-&gt;modify_bg(Gtk::STATE_NORMAL, new GdkColor(6400, 6400, 6440));
       
        $mb = new GtkMenuBar();

        $filemenu = new GtkMenu();
        $filemi = new GtkMenuItem("File");
        $filemi-&gt;set_submenu($filemenu);

        $mb-&gt;append($filemi);

        $imenu = new GtkMenu();

        $importm = new GtkMenuItem("Import");
        $importm-&gt;set_submenu($imenu);

        $inews = new GtkMenuItem("Import news feed...");
        $ibookmarks = new GtkMenuItem("Import bookmarks...");
        $imail = new GtkMenuItem("Import mail...");

        $imenu-&gt;append($inews);
        $imenu-&gt;append($ibookmarks);
        $imenu-&gt;append($imail);

        $filemenu-&gt;append($importm);
       
        $exitmi = new GtkMenuItem("Exit");
        $exitmi-&gt;connect_simple('activate', array('gtk', 'main_quit'));
                
        $filemenu-&gt;append($exitmi);

        $vbox = new GtkVBox(false, 2);
        $vbox-&gt;pack_start($mb, false, false, 0);

        $this-&gt;add($vbox);

        $this-&gt;set_default_size(320, 250); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
Submenu creation. 
</p>

<pre class="explanation">
$imenu = new GtkMenu();
</pre>

<p>
A submenu is a regular <code>GtkMenu</code>. 
</p>

<pre class="explanation">
$importm = new GtkMenuItem("Import");
$importm-&gt;set_submenu($imenu);
</pre>

<p>
It is a submenu of a menu item, which belogs to toplevel
file menu. 
</p>

<pre class="explanation">
$inews = new GtkMenuItem("Import news feed...");
$ibookmarks = new GtkMenuItem("Import bookmarks...");
$imail = new GtkMenuItem("Import mail...");

$imenu-&gt;append($inews);
$imenu-&gt;append($ibookmarks);
$imenu-&gt;append($imail);
</pre>

<p>
Submenus have their own menu items. 
</p>


<img src="/img/gui/phpgtk/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Image menu</h2>

<p>
In the next example, we will further explore the menus.
We will add images and accelerators to our menu items. 
<b>Accelerators</b> are keyboard shortcuts for activating menu items. 
</p>

<pre class="code">
&lt;?php

/* 
ZetCode PHP GTK tutorial

This example shows a menu with
images, accelerators and a separator.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/
 
class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    public function init_ui() {

        $this-&gt;set_title('Image menu');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $this-&gt;modify_bg(Gtk::STATE_NORMAL, new GdkColor(6400, 6400, 6440));
       
        $mb = new GtkMenuBar();

        $filemenu = new GtkMenu();
        $filemi = new GtkMenuItem("File");
        $filemi-&gt;set_submenu($filemenu);

        $mb-&gt;append($filemi);


        $agr = new GtkAccelGroup();
        $this-&gt;add_accel_group($agr);

        $newi = new GtkImageMenuItem(Gtk::STOCK_NEW, $agr);
        $newi-&gt;add_accelerator('activate', $agr, Gdk::KEY_N, 
             Gdk::CONTROL_MASK, Gtk::ACCEL_VISIBLE);
        $newi-&gt;connect_simple('activate', array($this, 'on_new_selected')); 
        $filemenu-&gt;append($newi);

        $openmi = new GtkImageMenuItem(Gtk::STOCK_OPEN, $agr);
        $openmi-&gt;add_accelerator('activate', $agr, Gdk::KEY_O, 
             Gdk::CONTROL_MASK, Gtk::ACCEL_VISIBLE);
        $filemenu-&gt;append($openmi);

        $sep = new GtkSeparatorMenuItem();
        $filemenu-&gt;append($sep);

        $exitmi = new GtkImageMenuItem(Gtk::STOCK_QUIT, $agr);
        $exitmi-&gt;add_accelerator('activate', $agr, Gdk::KEY_Q, 
             Gdk::CONTROL_MASK, Gtk::ACCEL_VISIBLE);
        $exitmi-&gt;connect_simple('activate', array('gtk', 'main_quit'));     
        $filemenu-&gt;append($exitmi);       
       
        $vbox = new GtkVBox(false, 2);
        $vbox-&gt;pack_start($mb, false, false, 0);

        $this-&gt;add($vbox);

        $this-&gt;set_default_size(320, 250); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }

    public function on_new_selected() {
        print "new";
    }

} 
     
new Example(); 
Gtk::main();
 
?>
</pre>

<p>
Our example shows a toplevel menu item with three sublevel menu items. Each of the
menu items has an image and an accelerator. The accelerator for the quit menu item
quits the application. The accelerator for the new menu item prints 'new' to the
console. 
</p>

<pre class="explanation">
$agr = new GtkAccelGroup();
$this-&gt;add_accel_group($agr);
</pre>

<p>
To work with accelerators, we create a global <code>GtkAccelGroup</code>
object. It will be used later.  
</p>

<pre class="explanation">
$newi = new GtkImageMenuItem(Gtk::STOCK_NEW, $agr);
$newi-&gt;add_accelerator('activate', $agr, Gdk::KEY_N, 
      Gdk::CONTROL_MASK, Gtk::ACCEL_VISIBLE);
$newi-&gt;connect_simple('activate', array($this, 'on_new_selected')); 
$filemenu-&gt;append($newi);
</pre>

<p>
A <code>GtkImageMenuItem</code> is created. The image comes from the stock
of images. We create also a Ctrl+N accelerator. When we select the menu item
with a mouse or press the accelerator, a message is printed to the console. 
</p>

<pre class="explanation">
$sep = new GtkSeparatorMenuItem();
$filemenu-&gt;append($sep);
</pre>

<p>
These lines create a separator. It is used to put menu items
into logical groups. 
</p>


<img src="/img/gui/phpgtk/imagemenu.png" alt="Image menu">
<div class="figure">Figure: Image menu</div>


<p>
Menus group commands that we can use in application. 
Toolbars provide a quick access to the most frequently used commands. 
</p>


<h2>Simple toolbar</h2>

<p>
Next we create a simple toolbar. A toolbar provides a quick
access to the most frequently used functionality of an application.
</p>


<pre class="code">
&lt;?php

/* 
ZetCode PHP GTK tutorial

This example shows a toolbar widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/
 
class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    public function init_ui() {

        $this-&gt;set_title('Toolbar');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $toolbar = new GtkToolbar();
        $toolbar-&gt;set_toolbar_style(Gtk::TOOLBAR_ICONS);

        $newtb = GtkToolButton::new_from_stock(Gtk::STOCK_NEW);
        $opentb = GtkToolButton::new_from_stock(Gtk::STOCK_OPEN);
        $savetb = GtkToolButton::new_from_stock(Gtk::STOCK_SAVE);
        $sep = new GtkSeparatorToolItem();
        $quittb = GtkToolButton::new_from_stock(Gtk::STOCK_QUIT);

        $toolbar-&gt;insert($newtb, 0);
        $toolbar-&gt;insert($opentb, 1);
        $toolbar-&gt;insert($savetb, 2);
        $toolbar-&gt;insert($sep, 3);
        $toolbar-&gt;insert($quittb, 4);
        
        $quittb-&gt;connect_simple("clicked", array('Gtk', 'main_quit'));

        $vbox = new GtkVBox(false, 2);
        $vbox-&gt;pack_start($toolbar, false, false, 0);

        $this-&gt;add($vbox);

        $this-&gt;set_default_size(250, 200); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
The example shows a toolbar and four tool buttons. 
</p>

<pre class="explanation">
$toolbar = new GtkToolbar();
</pre>

<p>
A <code>GtkToolbar</code> widget is created. 
</p>

<pre class="explanation">
$toolbar-&gt;set_toolbar_style(Gtk::TOOLBAR_ICONS);
</pre>

<p>
On toolbar, we show only icons. No text. 
</p>

<pre class="explanation">
$newtb = GtkToolButton::new_from_stock(Gtk::STOCK_NEW);
</pre>

<p>
A <code>GtkToolButton</code> with an image from
stock is created. The image comes from the built-in stock of
images. 
</p>

<pre class="explanation">
$sep = new GtkSeparatorToolItem();
</pre>

<p>
This is a separator. It can be used to put toolbar buttons
into logical groups. 
</p>

<pre class="explanation">
$toolbar-&gt;insert($newtb, 0);
$toolbar-&gt;insert($opentb, 1);
...
</pre>

<p>
Toolbar buttons are inserted into the toolbar widget. The
first parameter of the <code>insert()</code> method is the tool button.
The second is the position on the toolbar. 
</p>


<img src="/img/gui/phpgtk/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>


<p>
In this chapter of the PHP GTK tutorial, we showed, 
how to work with menus &amp; toolbars.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 3, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

